<template>
    <div class="register-container">
        <div class="register-card">
            <div class="logo-section">
                <img src="../../assets/logo.svg" alt="皮影快闪" class="logo">
                <h1 class="title">注册账号</h1>
            </div>

            <n-form ref="formRef" :model="formData" :rules="rules">
                <n-form-item path="username" label="用户名">
                    <n-input v-model:value="formData.username" placeholder="请输入用户名" />
                </n-form-item>

                <n-form-item path="email" label="邮箱">
                    <n-input v-model:value="formData.email" placeholder="请输入邮箱" />
                </n-form-item>

                <n-form-item path="password" label="密码">
                    <n-input v-model:value="formData.password" type="password" placeholder="请输入密码"
                        show-password-on="click" />
                </n-form-item>

                <n-form-item path="confirmPassword" label="确认密码">
                    <n-input v-model:value="formData.confirmPassword" type="password" placeholder="请再次输入密码"
                        show-password-on="click" />
                </n-form-item>

                <n-form-item path="agreement">
                    <n-checkbox v-model:checked="formData.agreement">
                        我已阅读并同意 <n-button text>用户协议</n-button> 和 <n-button text>隐私政策</n-button>
                    </n-checkbox>
                </n-form-item>

                <n-button type="primary" block @click="handleRegister" :loading="isLoading">
                    注册
                </n-button>

                <div class="login-link">
                    已有账号?
                    <n-button text @click="goToLogin">立即登录</n-button>
                </div>
            </n-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { NForm, NFormItem, NInput, NCheckbox, NButton } from 'naive-ui'
import type { FormInst, FormRules, FormItemRule } from 'naive-ui'

const router = useRouter()
const message = useMessage()

const formRef = ref<FormInst | null>(null)
const isLoading = ref(false)

const formData = reactive({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    agreement: false
})

const validateConfirmPassword = (_rule: any, value: string) => {
    if (!value) {
        return new Error('请再次输入密码')
    }
    if (value !== formData.password) {
        return new Error('两次输入的密码不一致')
    }
    return true
}

const rules: FormRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在3-20个字符之间', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: validateConfirmPassword, trigger: 'blur' }
    ],
    agreement: [
        {
            validator: (_rule: any, value: boolean) => {
                if (!value) return new Error('请同意用户协议和隐私政策')
                return true
            },
            trigger: 'change'
        }
    ]
}

const handleRegister = () => {
    formRef.value?.validate(async (errors: any) => {
        if (!errors) {
            try {
                isLoading.value = true
                // 模拟注册过程
                setTimeout(() => {
                    message.success('注册成功，请登录')
                    router.push('/login')
                    isLoading.value = false
                }, 1000)
            } catch (error) {
                message.error('注册失败，请稍后再试')
                isLoading.value = false
            }
        }
    })
}

const goToLogin = () => {
    router.push('/login')
}
</script>

<style lang="scss" scoped>
.register-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    padding: 20px;

    .register-card {
        width: 460px;
        padding: 40px;
        border-radius: 8px;
        background-color: var(--component-background);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

        .logo-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 32px;

            .logo {
                width: 64px;
                height: 64px;
                margin-bottom: 16px;
            }

            .title {
                font-size: 24px;
                font-weight: 600;
            }
        }

        .login-link {
            margin-top: 24px;
            text-align: center;
        }
    }
}

@media (max-width: 520px) {
    .register-container {
        .register-card {
            width: 100%;
            padding: 24px;
        }
    }
}
</style>